<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
let echartRef = echarts;
const chartEl = ref();
const option = {
  tooltip: {
    trigger: "item",
  },
  title: [
    {
      text: "75%",
      left: "center",
      top: "center",
      textStyle: {
        fontSize: 14,
        color: "#ffffff",
      },
    },
  ],
  legend: {
    show: false,
    top: "5%",
    left: "center",
  },
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: ["80%", "90%"],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: "bottom",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 75, name: "Search Engine" },
        { value: 25, name: "Direct" },
      ],
      itemStyle: {
        normal: {
          color: function (colors: any) {
            var colorList = [
              "#23fffc",
              "transparent",
              "#91cd77",
              "#ef6567",
              "#f9c956",
              "#75bedc",
            ];
            return colorList[colors.dataIndex];
          },
        },
      },
    },
  ],
};
onMounted(() => {
  initEcharts();
});
const initEcharts = () => {
  let chart = echartRef.init(chartEl.value);
  chart.setOption(option);
  window.onresize = function () {
    chart.resize();
  };
};
</script>
<template>
  <div class="chart-wrapper">
    <div ref="chartEl" :style="{ width: '86px', height: '86px' }"></div>
    <div class="border"></div>
  </div>
</template>
<style lang="scss" scoped>
.chart-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.border {
  position: absolute;
  z-index: 0;
  width: 60px;
  height: 60px;
  border: 5px solid #23fffc88;
  border-radius: 50%;
}
</style>
